<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>数据分析</title>

  <link rel="stylesheet" type="text/css" href="easyui/themes/material/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

  <script type="text/javascript" src="web/amcharts/amcharts.js"></script>
  <script type="text/javascript" src="web/echart/dist4.7/echarts.js"></script>
  <script type="text/javascript" src="web/echart/dist4.7/echarts.min.js"></script>

  <script src="web/JS/URLRooter.js"></script>
  <script src="web/JS/common.js"></script>
  <script src="data_analysis_3_2.js"></script>

  <style>
    .labelstyle {
      font-size: 15px;
      
    }

    .chartdiv {
      width: 80%;
      height: 43%;
    }
    .result{
      display: flex;
      width: 80%;
      position: relative;
    }
    .qushi,.tiaobian{
      width: 50%;
      text-align: center;
      height: 100px;
      line-height: 100px;
      font-size: 18px;
      font-weight: 500;
    }
    .qushicolor,.tiaobiancolor{
      display: inline-block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #0f0;
      margin-left: 10px;
      position: absolute;
      top: calc(50% - 11px);
    }
  </style>
  <script>
  </script>
</head>

<body class="easyui-layout" data-options="border:false">
  <div data-options="region:'north',title:'',border:false" style="height:6%;padding-left:20px;padding-top: 15px;background-color: #f3f3f3;">
    <span  class="labelstyle">目前运行状态:</span> <span id="sp_status" style="color:blue;font-weight:bold;" class="labelstyle"></span>
  </div>
  <div data-options="region:'center',title:'',border:false" style="padding:0px;">
    <div class="easyui-layout" style="width:100%;height:100%;" data-options="border:false">
      <div data-options="region:'west',title:'压缩机A',split:false,border:true,collapsible:false" style="width:50%;">
        <div style="padding-left: 20px;padding-top: 6px;">
          点位选择:
          <select id="cmb_SearchTypeA" class="easyui-combobox" style="width: 300px;">
            <option value="temp_E" selected>压缩机A入口温度</option>
            <option value="temp_O">压缩机A出口温度</option>
            <option value="press_O">压缩机A出口压力</option>
          </select>
        </div>
        <div id="chartdiv1" class="chartdiv"></div>
        <div class="result">
          <div class="qushi">趋势分析<span class="qushicolor" id="qushicolorA"></span></div>
          <div class="tiaobian">跳变分析<span class="tiaobiancolor" id="tiaobiancolorA"></span></div>
        </div>
      </div>
      <div data-options="region:'center',title:'压缩机B'" style="padding:0px;">
        <div style="padding-left: 20px;padding-top: 6px;">
          点位选择:
          <select id="cmb_SearchTypeB" class="easyui-combobox" style="width: 300px;">
            <option value="temp_E" selected>压缩机B入口温度</option>
            <option value="temp_O">压缩机B出口温度</option>
            <option value="press_O">压缩机B出口压力</option>
          </select>
        </div>
        <div id="chartdiv2" class="chartdiv"></div>
        <div class="result">
          <div class="qushi">趋势分析<span class="qushicolor" id="qushicolorB"></span></div>
          <div class="tiaobian">跳变分析<span class="tiaobiancolor" id="tiaobiancolorB"></span></div>
        </div>
      </div>
    </div>
  </div>
  <div data-options="region:'south',title:'',border:false" style="height:47%;padding:5px;">
    <div class="easyui-layout" style="width:100%;height:100%;" data-options="border:false">
      <div data-options="region:'west',title:'洗涤器',split:false,collapsible:false" style="width:50%;">
        <div style="padding-left: 20px;padding-top: 6px;">
          点位选择:
          <select id="cmb_SearchType_XD" class="easyui-combobox" style="width: 300px;">
            <option value="Liquid_L">洗涤器液位</option>
            <option value="press_O">洗涤器压力</option>
          </select>
        </div>
        <div id="chartdiv3" class="chartdiv"></div>
        <div class="result">
          <div class="qushi">趋势分析<span class="qushicolor" id="qushicolorLiquid"></span></div>
          <div class="tiaobian">跳变分析<span class="tiaobiancolor" id="tiaobiancolorLiquid"></span></div>
        </div>
      </div>
    </div>
  </div>
</body>


</html>